
<template>
<div>
   <div class="content page-market"  style="padding-bottom:2.5rem;overflow-x: hidden;overflow-y: auto;">
       <div style="position: relative;">
           <a href="#" class="favorite yellow">
               <i style="font-size: 0.7rem;vertical-align: unset;" class="font font-bxing ng-scope"></i>
               自选
           </a>
           <div class="f-left products">
               <div class="select"  v-on:click="link_to_market()" style="margin-left: 0.7rem">
                   <label>
                   <i class="icon icon-left" style="font-size: 0.6rem;color: #F0B90B;font-weight:bold;"></i>
                       <span>{{up_coin_type}} / {{up_use_coin_type}}</span>
                   </label>
               </div>
           </div>
           <div class="kline-params">
               <div class="lastPrice " :class="{ magenta:show_arrow == 2?true : false, white:show_arrow == 1 ? true:false }">
                  <span class="">{{show_curr_price}}</span>
                  <span class="transMoney">￥{{show_curr_price_cny}}</span>
               </div>
              <div class="priceChange" >
                   <span >24h涨跌幅: <span :class="{ magenta:show_percent > 0 ? true : false, green:show_percent <= 0 ? true:false }" >{{show_percent}}%</span></span>
                   <span class="f-fr">{{show_low}}</span>
                   <span class="f-fr">24h最低价:</span>
               </div>
               <div class="priceChangedown">
                   <span >24h成交量  {{show_volume}} {{up_use_coin_type}}</span>
                   <span class="f-fr">{{show_high}}</span>
                   <span class="f-fr">24h最高价: </span>
               </div>
           </div>
       </div>
       <div class="kline-box">
           <div class="kline-tab">
               <span  v-bind:class="{cur:linetype==1}" v-on:click="changLineType(1)">
                   <i class="font font-kline"></i>
                   K线图
              </span>
              <span v-bind:class="{cur:linetype==2}" v-on:click="changLineType(2)">
               <i class="font font-depth"></i>
               深度图
             </span>
           </div>
       </div>
       <div style="height:300px;position: relative;">
           <div class="kline" v-bind:class="{kin:linetype==1}" >
            <div class="trade_kline">
                <!-- todo !!!!!!!!!!!!!!!!! 用div 因为全屏，然后全屏不屏蔽大部分信息 , 然后延时显示 symbol是关键词改一个-->
            <iframe id="tradingview" name="tradingview" src="/tradingview?symbol_key=btc_bitcny&system=mobile" frameborder="0" allowtransparency="true" scrolling="no" allowfullscreen="" style="display: block; width: 100%; height: 300px;"></iframe>
            </div>
           </div>
           <div class="depth" v-bind:class="{kin:linetype==2}" ></div>
       </div>
       <div class="trades">
           <div class="trades-title">最新成交 <i class="fa fa-arrow-down"></i></div>
           <table class="table">
                <colgroup style="width:31%;"></colgroup>
                <colgroup style="width:31%;"></colgroup>
                <colgroup style="width:38%;"></colgroup>
                <thead>
                    <tr>
                        <th class="f-left ng-binding">价格</th>
                        <th class="f-right ng-binding">数量</th>
                        <th class="f-right ng-binding">时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in history">
                        <td class="f-left " :class="{ magenta:item.type == 0 ?true : false, green:item.type == 1 ? true:false }">{{item.price}}</td>
                        <td class="f-right">{{item.count}}</td>
                        <td class="f-right" style="color:#868686">{{item.time}}</td>
                    </tr>
                </tbody>
            </table>
       </div>
       <!--
      <div class="bottom-btns" style="z-index: 8888;">
          <a href="#/trade?symbol=BTC" class="buy">买入 QTUM</a>
         <a href="#/trade?symbol=BTC" class="sell">卖出 QTUM</a>
      </div>
      -->
   </div>
</div>

</template>

<script>
var dict = {
    coin_type:'btc',
    use_coin_type:'bitcny'
}

export default {
    name: 'MARKET',
    data:function () {
            var d = {}
            d.linetype=1
            d.coin_type=dict.coin_type
            d.use_coin_type=dict.use_coin_type
            d.up_coin_type=dict.coin_type.toUpperCase()
            d.up_use_coin_type=dict.use_coin_type.toUpperCase()
            d.show_curr_price = "0.00"
            d.show_curr_price_cny = "0.00"
            d.show_open = "0.0000"
            d.show_low = "0.0000"
            d.show_high = "0.0000"
            d.show_percent = "0.00"
            d.show_arrow = 1
            d.show_volume = "0.00"
            d.history = ""
            return d
    },
    created:function () {
        this.get_curr_market()
        this.get_history()
    },
    methods:{
        changLineType:function (n) {
            this.linetype=n;
        },
        link_to_market: function () {
            window.location.href = './market';
        },
        get_curr_market: function ()
        {
            $.post("/btc/get_curr_market", {
                    coin_type: this.coin_type,
                    use_coin_type: this.use_coin_type
                },
            (jsonobj) => {
                //console.log("get curr market ")
                //console.log(jsonobj)
                if (jsonobj.length == 0) {
                    return
                }

                var info = jsonobj[0];
                var key = info.coin_type + "2" + info.use_coin_type;
                var market = g_markets[key];
                if (market == undefined || market.active == false) {
                    return
                }

                var tofixed = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_price)
                var curr = floor_number(info.curr, tofixed)
                var open = floor_number(info.open, tofixed)
                var high = floor_number(info.high, tofixed)
                var low = floor_number(info.low, tofixed)

                var tofixed_count = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_count)
                var volume = floor_number(info.volume, tofixed_count)

                var percent = 0
                if (info.curr != info.open)
                {
                    percent = (info.curr - info.open) * 100 / info.open
                    tofixed = 2
                    percent = floor_number(percent, tofixed)
                }
                this.show_curr_price = curr
                this.show_curr_price_cny = curr
                this.show_open = open
                this.show_low = low
                this.show_high = high
                this.show_percent = percent
                this.show_arrow = info.arrow
                this.show_volume = volume

            })
        },
        // todo btc/login/trade/last_trade.html 数字位数，还有好像倒序了2次
        get_history: function ()
        {
            //console.log("this.coin_type "  + this.coin_type)
            $.post("/btc/get_last_trade",
            {coin_type: this.coin_type, use_coin_type: this.use_coin_type},
            (jsonobj) => {
                //console.log(jsonobj)
                var history_list = []
                var tofixed_count = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_count)
                var tofixed_price = coin_tofixed(this.coin_type, this.use_coin_type, coin_tofixed_type_price)
                for (var i = 0; i < jsonobj.length; i++)
                {
                    var info = jsonobj[i]
                    var data = {}
                    data.time =date_format_time(info.finish_time);
                    data.price = floor_number(info.price, tofixed_price)
                    data.count = floor_number(info.count, tofixed_count)
                    history_list.push(data)
                }
                this.history = history_list
            })
        },
    }
}

</script>
